import type { FC } from 'react';
import { useEffect } from 'react';
import { Carousel, Image, message } from 'antd';
import type { StateType } from './model';
import type { Dispatch } from 'umi';
import { connect } from 'umi';

interface BannerProps {
  bannermodel: StateType;
  dispatch: Dispatch;
  loading: boolean;
}

export const Banner: FC<BannerProps> = (props) => {
  const {
    loading,
    dispatch,
    bannermodel: { list },
  } = props;

  useEffect(() => {
      dispatch({
          type: 'bannermodel/fetch'
      })
  }, [1])

  const view = () => {
    message.info('查看内容！')
  }

  return (
    <Carousel autoplay>
      {
        list.map(({src, alt}) => {
          return(
            <Image 
              key={0} 
              preview={false} 
              src={src}
              alt={alt}
              onClick={view}
            />
          )
        })
      }
    </Carousel>
  )
}

export default connect(({
    bannermodel,
    loading
  }: {
    bannermodel: StateType;
    loading: {
      models: Record<string, boolean>;
    }
  }) => ({
    bannermodel,
    loading: loading.models.list
  })
)(Banner)